<script setup lang="ts">
import { useTimeTypeFormat } from '@/mixins/MixinTimeTypeFormat'
import { useTemplateView } from '@/mixins/MixinTemplateView'
import LineChart from './components/LineChart.vue'
import SankeyChart from './components/SankeyChart.vue'
import { STORAGE_MODES } from '@/enum/modules/indicator'

import { useLoadData, type GetTopTagTotalResultItem } from './composable'

const { getCode } = useTemplateView()

const total = ref<GetTopTagTotalResultItem>()
const modelName = computed(() => {
  return total.value?.name || ''
})
const unitName = computed(() => {
  return total.value?.unit || ''
})

const currentTagId = ref<string | null>(null)

const {
  timeType,
  dataTime,
  pickerType,
  pickerFormat,
} = useTimeTypeFormat()

const {
  tagTotalData,
  tagDetailsData,
  tagChartData,
  getTopTagTotal,
  getTopTagDetails,
  querySangitaCharts,
} = useLoadData()

async function clickSearch() {
  const params = {
    modelCode: getCode() as string,
    timeType: unref(timeType),
    dataTime: unref(dataTime),
    tagId: currentTagId.value,
  }
  const t = await getTopTagTotal(params)
  total.value = t[0]
  await getTopTagDetails(params)
  await querySangitaCharts(params)
}

function getColorClass(key: 'mom' | 'yoy', item?: GetTopTagTotalResultItem) {
  if (!item)
    return ''
  if (item.indicatorData[key] === null)
    return ''
  return item.indicatorData[key] > 0 ? 'text-rose' : 'text-green'
}
function getUpOrDownString(key: 'mom' | 'yoy', item?: GetTopTagTotalResultItem) {
  if (!item)
    return ''
  if (item.indicatorData[key] === null)
    return ''
  return item.indicatorData[key] > 0 ? '↑' : '↓'
}

watch(currentTagId, () => {
  getTopTagDetails({
    modelCode: getCode() as string,
    timeType: unref(timeType),
    dataTime: unref(dataTime),
    tagId: currentTagId.value,
  })
})

onMounted(() => {
  clickSearch()
})
</script>

<template>
  <div class="box-border h-full w-full flex flex-col p-4">
    <div class="flex flex-nowrap items-center">
      <span>时间</span>
      <ElSelect v-model="timeType" class="ml-3 !w-24">
        <ElOption label="日" :value="STORAGE_MODES.DAY" />
        <ElOption label="月" :value="STORAGE_MODES.MONTH" />
        <ElOption label="年" :value="STORAGE_MODES.YEAR" />
      </ElSelect>
      <ElDatePicker v-model="dataTime" class="ml-0" :type="pickerType" :value-format="pickerFormat" :format="pickerFormat" />
      <SearchButton class="ml-3" @click="clickSearch" />
    </div>
    <div class="mt-4 flex-shrink-0 overflow-x-auto">
      <div class="pb-4 pt-2">
        {{ modelName }}量
      </div>
      <div class="flex flex-nowrap whitespace-nowrap">
        <div class="alpha-block h-66 min-w-80 cursor-pointer" :class="{ active: currentTagId === null }" @click="currentTagId = null">
          <div class="h-full w-full flex flex-col justify-center p-4 text-center">
            <h3 class="mb-3 font-normal">
              {{ modelName }}总量
            </h3>
            <p class="mt-0">
              （{{ unitName }}）
            </p>
            <h2 class="mt-0">
              {{ total?.indicatorData?.val || '-' }}
            </h2>
            <div class="mt-4 flex items-center px-4">
              <p class="fs-14">
                <span>环比：</span><code class="fs-16" :class="getColorClass('mom', total)">{{ total?.indicatorData?.mom ?? '-' }}%</code><code :class="getColorClass('mom', total)">{{ getUpOrDownString('mom', total) }}</code>
              </p>
              <p class="fs-14 ml-auto">
                <span>同比：</span><code class="fs-16" :class="getColorClass('yoy', total)">{{ total?.indicatorData?.yoy ?? '-' }}%</code><code :class="getColorClass('yoy', total)">{{ getUpOrDownString('yoy', total) }}</code>
              </p>
            </div>
          </div>
        </div>
        <span class="self-center px-2 text-sm">=</span>
        <div class="flex-auto overflow-auto">
          <div class="flex flex-nowrap items-center whitespace-nowrap">
            <template v-for="(item, index) in tagTotalData?.slice(1)" :key="item.tagId">
              <div class="alpha-block h-66 min-w-80 flex-1 cursor-pointer" :class="{ active: currentTagId === item.tagId }" @click="currentTagId = item.tagId">
                <div class="h-full w-full flex flex-col justify-center p-4 text-center">
                  <h3 class="mb-3 font-normal">
                    {{ item.name }}
                  </h3>
                  <p class="mt-0">
                    （{{ item.unit }}）
                  </p>
                  <h2 class="mt-0">
                    {{ item.indicatorData.val || '-' }}
                  </h2>
                  <div class="mt-4 flex items-center px-4">
                    <p class="fs-14">
                      <span>环比：</span><code class="fs-16" :class="getColorClass('mom', item)">{{ item?.indicatorData?.mom ?? '-' }}%</code><code :class="getColorClass('mom', item)">{{ getUpOrDownString('mom', item) }}</code>
                    </p>
                    <p class="fs-14 ml-auto">
                      <span>同比：</span><code class="fs-16" :class="getColorClass('yoy', item)">{{ item?.indicatorData?.yoy ?? '-' }}%</code><code :class="getColorClass('yoy', item)">{{ getUpOrDownString('yoy', item) }}</code>
                    </p>
                  </div>
                </div>
              </div>
              <span v-if="tagTotalData && index !== tagTotalData.length - 2" class="px-2 text-sm">+</span>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-4 flex flex-auto items-center">
      <div class="alpha-block h-full flex-1 shrink-0">
        <LineChart v-if="tagDetailsData" :model-name="modelName" :data="tagDetailsData" />
      </div>
      <div class="alpha-block ml-4 h-full flex-1 overflow-auto">
        <SankeyChart v-if="tagChartData" :model-name="modelName" :data="tagChartData" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.alpha-block.active {
  background-color: #f5f5f5;
}
html.dark .alpha-block.active {
  background-color: #0081ff;
}
</style>
